<template>
	<div>
		<h2>基本设置</h2>
		<Form ref="form" :model="data" :rules="rules" label-position="top" class="ivu-mt">
			<Row type="flex" :gutter="48">
				<Col v-bind="grid1">
				<Cropper id="avatar" :src="data.avatar" crop-button-text="确认提交" @on-crop="onCropper" />
				</Col>
				<Col v-bind="grid2">
				<FormItem label="姓名" prop="name">
					<Input v-model="data.name" placeholder="请输入昵称" />
				</FormItem>
				<FormItem label="邮箱" prop="email">
					<Input v-model="data.email" placeholder="请输入邮箱" />
				</FormItem>
				<FormItem label="个人介绍" prop="personIntroduction">
					<Input v-model="data.personIntroduction" type="textarea" placeholder="请输入个人介绍" />
				</FormItem>
				<FormItem label="工作地点" prop="city">
					<City v-model="data.city" :cities="DefaultCities" />
				</FormItem>
				<FormItem>
					<Button type="primary" @click="onSubmit">更新基本信息</Button>
				</FormItem>
				</Col>
			</Row>
		</Form>
	</div>
</template>
<script>
import { mapState } from 'vuex'
import Cropper from '@/components/cropper'
import { DefaultCities } from '@/constants'
import { updateBasicMessage } from '@/api/user'

export default {
	name: 'accountInfo',
	components: {
		Cropper
	},
	data() {
		return {
			DefaultCities,
			grid1: {
				xl: {
					span: 16,
					order: 2
				},
				lg: {
					span: 24,
					order: 1
				},
				md: {
					span: 24,
					order: 1
				},
				sm: {
					span: 24,
					order: 1
				},
				xs: {
					span: 24,
					order: 1
				}
			},
			grid2: {
				xl: {
					span: 8,
					order: 1
				},
				lg: {
					span: 24,
					order: 2
				},
				md: {
					span: 24,
					order: 2
				},
				sm: {
					span: 24,
					order: 2
				},
				xs: {
					span: 24,
					order: 2
				}
			},
			data: {
				avatar: '',
				name: '',
				email: '',
				personIntroduction: '',
				city: '',
				companyId: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入昵称' }
				],
				email: [
					{ required: true, message: '请输入邮箱' },
					{ required: true, type: 'email', message: '请输入正确的邮箱' }
				],
				personIntroduction: [
					{ required: true, message: '请输入个人介绍' }
				],
				city: [
					{ required: true, message: '请选择居住地' }
				]
			},
			isUpload: false
		}
	},
	computed: {
		...mapState('admin/user', [
			'info'
		])
	},
	created() {
		this.data.avatar = this.info.headimgUrl
		this.data.name = this.info.name
		this.data.email = this.info.email
		this.data.personIntroduction = this.info.personIntroduction
		this.data.city = this.info.workCity
		this.data.companyId = this.info.companyId
	},
	methods: {
		onSubmit() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					const response = await updateBasicMessage({
						userId: this.info.userId,
						name: this.data.name,
						email: this.data.email,
						personIntroduction: this.data.personIntroduction,
						workCity: this.data.city,
						companyId: this.data.companyId,
					})
					if (response.code === 1000) {
						this.$Message.success('更新成功');
						this.$store.dispatch('admin/user/set', {
							...this.info,
							name: this.data.name,
							email: this.data.email,
							personIntroduction: this.data.personIntroduction,
							workCity: this.data.city,
							companyId: this.data.companyId,
						}, { root: true })
					}
				}
			});
		},
		onCropper() {
			this.data.avatar = this.info.headimgUrl
		}
	}
}
</script>
<style lang="less">
.setting-account-info {
	&-avatar {
		width: 90px;
		height: 90px;
	}
}
</style>
